<template>
  <Mapbox :mapOnLoadCB="mapOnLoadCB"></Mapbox>
  <div id='geocoder' class='geocoder'></div>
</template>

<script>
import {ref} from "vue"
import Mapbox from "@/components/common/Mapbox.component.vue"

export default {
  name: "UserQueryAddr.component",
  components: {Mapbox},
  setup() {

    let mapStore = ref({});
    let mapOnLoadCB = (map) => {
      mapStore.value = map;

      // 使用 mapbox-gl-geocoder 控件，利用与地图外部元素连接的 Mapbox Geocoding API 来查找地点。
      let geocoder = new MapboxGeocoder({
        accessToken: mapboxgl.accessToken,
        mapboxgl: mapboxgl
      });

      document.getElementById('geocoder').appendChild(geocoder.onAdd(map));
    };

    return {
      mapOnLoadCB
    }
  }
}
</script>

<style scoped lang="scss">
.geocoder {
  position: absolute;
  z-index: 1;
  width: 50%;
  left: 50%;
  margin-left: -25%;
  top: 20px;
}

:deep(.mapboxgl-ctrl-geocoder) {
  min-width: 100%;
}
</style>